<script setup>
import { useUserStore } from '@/stores/user';
import userLogo from '@/assets/img/user_default.jpeg';

const user = useUserStore();

const logout = () => user.logout();

const version = 'v1.2.1';
</script>
<template>
  <XPage title="我的" hide-header>
    <div class="user-header">
      <van-image class="user-avatar" height="64" width="64" :src="userLogo" round fit="cover" />
      <div class="user-info">
        <div class="user-info-txt">{{ user.username || '未知用户' }}</div>
        <div class="user-info-txt">账号：{{ user.loginName || '未知用户' }}</div>
      </div>
    </div>

    <van-cell-group inset class="mine-menu menu-first">
      <van-cell title="个人信息" is-link to="/mine/PersonalInformation" />
      <van-cell title="修改密码" is-link to="/mine/ChangePassword" />
      <van-cell title="版本号" :value="version"></van-cell>
    </van-cell-group>

    <van-cell-group inset class="mine-menu">
      <van-button class="mine-logout" block @click="logout">退出登录</van-button>
    </van-cell-group>
    <XNavigation />
  </XPage>
</template>

<style lang="stylus" scoped>

.user-header
    display flex
    flex-direction row
    align-items center
    background-image url("@/assets/img/mine_card_bg.png")
    background-repeat no-repeat
    background-size cover

    &::before
      display block
      padding-bottom 75.47%;
      content ''

    .user-avatar
      padding 2px;
      margin-left 16px
      background white
      border-radius 50%

    .user-info
      margin-left 16px

      .user-info-txt
        margin 8px;
        font-size 18px

    .header-logout
      padding 4px 24px
      margin-right 8px
      margin-left auto
      font-size 16px
      color white
      background-color rosybrown
      border-radius 4px

  .mine-menu
    margin-top 16px

    &.menu-first
      margin-top -48px

    .mine-logout
      font-weight bold;
      color #ffa1a9
      background white
      border 0
      border-radius 0
</style>
